<template>
  <div>
      <div class="wrapper">
          <ul class="floolw_box">

              <li v-for="(item,index) in storedata">
                  <div class="list"  v-if="item.type == 1">
                      <span class="left">
                          <i :style="group_bg"></i>
                      </span>
                      <span class="fl">
                          <p class="h3">{{item.name}}</p>
                          <p class="fl_txt"  v-if="item.full_price != '0'">折扣劵满{{item.full_price}}元可用</p>
                          <p v-else class="fl_txt">通用优惠券</p>
                          <p class="data_txt" v-if="item.end_time !='-1'">{{item.start_time*1000 | formatDate}}-{{item.end_time*1000 | formatDate}}</p>
                          <p class="data_txt" v-else>使用期限：无期限</p>
                      </span>
                      <router-link class="right"
                            :to="{ name: 'CouponDetails',query:{store_id:item.store_id,coupon_id:item.id}}"
                            :style="coupon_bg">
                            <p class="price">{{item.ratio}}<em>折</em></p>
                        <span class="lingqu">
                            立即领取
                        </span>
                      </router-link>
                  </div>
                  <div class="list"  v-else-if="item.type == 2">
                      <span class="left">
                            <i :style="group_bg"></i>
                      </span>
                      <span class="fl">
                          <p class="h3">{{item.name}}</p>
                          <p class="fl_txt"  v-if="item.full_price != '0'">满减劵满{{item.full_price}}元可用</p>
                          <p v-else class="fl_txt">通用优惠券</p>
                          <p class="data_txt" v-if="item.end_time !='-1'">{{item.start_time*1000 | formatDate}}-{{item.end_time*1000 | formatDate}}</p>
                          <p class="data_txt" v-else>使用期限：无期限</p>
                      </span>
                      <router-link class="right"
                            :to="{ name: 'CouponDetails',query:{store_id:item.store_id,coupon_id:item.id}}"
                            :style="coupon_bg">
                          <p class="price"><em>&yen;</em>{{item.price}}</p>
                          <span class="lingqu">
                              立即领取
                          </span>
                      </router-link>
                  </div>
              </li>

          </ul>
      </div>
  </div>
</template>
<script>
import {formatDate} from '@/util/date.js';
export default {
    data(){
        return{
            coupon_bg:{
                backgroundImage: "url(" + require("../assets/coupon_bg@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            group_bg:{
                backgroundImage: "url(" + require("../assets/group@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            comaction:""
        }
    },
    filters: {
        formatDate(time) {
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd');
        }
    },
    props:{
      'storedata':Array,
    },
    methods:{

    },
    components:{
    }
}
</script>
<style scoped>
.wrapper{
    overflow: hidden;
}
.floolw_box{
    padding-top: .4rem;
}
.floolw_box .list{
    height: 4.16rem;
    margin: 0 .64rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin-top: .52rem;
    background: #ffffff;
}
.floolw_box .list .left{
    width: 1.88rem;
    height: 100%;
    flex: none;
    position: relative;
}
.floolw_box .list .left>i{
    width: .8rem;
    height: 2.84rem;
    position: absolute;
    top: -.2rem;
    left: .6rem;
}
.floolw_box .list .fl{
    flex: 1;
    overflow: hidden;
}
.floolw_box .list .right{
    width: 4.6rem;
    height: 4.16rem;
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.floolw_box .list .price{
    font-size: 1.08rem;
    color: #FFFFFF;
    font-weight: bold;
    margin-bottom: .2rem;
}
.floolw_box .list .price > em{
    font-size: .6rem;
    margin-right: .2rem;
}
.floolw_box .list .fl .h3{
    font-size: .64rem;
    color: #272727;
    margin-bottom: .44rem;
    text-align: left;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.floolw_box .list .fl .fl_txt{
    line-height: 1.1;
    font-size: .52rem;
    color: #1ABBA2;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.floolw_box .list .fl .data_txt{
    margin-top: .32rem;
    line-height: 1.1;
    font-size: .52rem;
    color: #B6B6B6;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.floolw_box .list .right .lingqu{
    display: block;
    width: 2.8rem;
    height: 1.12rem;
    line-height: 1.12rem;
    background: #ffffff;
    font-size: .44rem;
    color: #13B086;
    border-radius: .8rem;
}

</style>
